<template>
  <div>
    <div id="main">
      <div class="menu">
        <div class="title">Select Dowload file type</div>
        <div class="search">
          <el-input 
            placeholder="Search"  
            v-model="filterText">
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="clickFilterNode"
            ></el-button>
          </el-input>
        </div>
        <el-tree
          :data="data"
          node-key="id"
          default-expand-all
          highlight-current
          :current-node-key="current"
          :props="defaultProps"
          :filter-node-method="filterNode"
          @node-click='treeNodeClick'
          ref="tree"
        >
        </el-tree>
      </div>
      <div class="container">
        <div class="title">{{title}}</div>
        <div class="content2" v-html="content">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed:{
    treeTable:function(){
      var searchValue=this.search;
      if(searchValue){
        // 一般表格的查询
        // return  this.tableData.filter(function(dataNews){
        //   return Object.keys(dataNews).some(function(key){
        //     return String(dataNews[key]).toLowerCase().indexOf(search) > -1
        //   })
        // })
        let treeData = this.tableData
        let handleTreeData = this.handleTreeData(treeData, searchValue)
        this.setExpandRow(handleTreeData)
        this.expandRow = this.expandRow.join(",").split(",")
        return handleTreeData
      }
      return this.tableData
    }
  },
  created() {
    this.$api.getCategory().then((res) => {
      this.data = res;
      this.$nextTick(()=>{ //默认选中首个元素
      // 判断首个元素是否有子元素；有则显示子元素第一条；否则显示本身
        let firstData = {}
        if(res[0]&&res[0].childList){
          firstData.id = res[0]?res[0].childList[0].id:''
          firstData.name = res[0]?res[0].childList[0].name:''
        }else{
          firstData.id = res[0]?res[0].id:''
          firstData.name = res[0]?res[0].name:''
        }
        
        this.id = firstData.id;
        this.$refs.tree.setCurrentKey(firstData.id)
        this.title = firstData.name
        this.$api.checkContent(firstData.id).then((value)=>{
          this.content = value.content;
          // this.imgUrl =window.VUE_APP_BASE_URL + res.imgs[res.imgs.length-1].img;
        })
      })
      
    });
  },
  data() {
    return {
      title:'Aute Toxicity',
      data: [
        {
          label: "Toxicity Datasets",
          children: [
            {
              label: "Aute Toxicity",
            },
            {
              label: "Systematic Toxicity",
            },
            {
              label: "Carcimgenity",
            },
            {
              label: "Cadiotoxicity",
            },
            {
              label: "Systematic Toxicity",
            },
            {
              label: "Carcimgenity",
            },
            {
              label: "Cadiotoxicity",
            },
            {
              label: "Systematic Toxicity",
            },
            {
              label: "Carcimgenity",
            },
          ],
        },
        {
          label: "Multi—Dim Feature",
          children: [
            {
              label: "Aute Toxicity",
            },
            {
              label: "Systematic Toxicity",
            },
            {
              label: "Carcimgenity",
            },
            {
              label: "Cadiotoxicity",
            },
            {
              label: "Systematic Toxicity",
            },
            {
              label: "Carcimgenity",
            },
            {
              label: "Cadiotoxicity",
            },
            {
              label: "Systematic Toxicity",
            },
            {
              label: "Carcimgenity",
            },
          ],
        },
        {
          label: "Graph Algerithm",
          children: [
            {
              label: "Aute Toxicity",
            },
            {
              label: "Systematic Toxicity",
            },
            {
              label: "Carcimgenity",
            },
            {
              label: "Cadiotoxicity",
            },
            {
              label: "Systematic Toxicity",
            },
            {
              label: "Carcimgenity",
            },
            {
              label: "Cadiotoxicity",
            },
            {
              label: "Systematic Toxicity",
            },
            {
              label: "Carcimgenity",
            },
          ],
        },
      ],
      id:'',
      content:'',
      imgUrl:'',
      filterText: "",
      current:"",
      defaultProps: {
        children: "childList",
        label: "name",
      },
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    clickFilterNode() {
      this.$refs.tree.filter(this.filterText);
    },
    //点击tree节点执行
    treeNodeClick(e,node){
      // console.log(e,'e')
      if(node.isLeaf){
        this.title = e.name
        this.$api.checkContent(e.id).then((res)=>{
          this.content = res.content
        })
      }
      
    },
    //  树形表格过滤
    handleTreeData(treeData, searchValue) {
      if (!treeData || treeData.length === 0) {
          return [];
        }
        const array = [];
        for (let i = 0; i < treeData.length; i += 1) {
          let match = false;
          for(let pro in treeData[i]){
            if(typeof(treeData[i][pro])=='string'){
              match |= treeData[i][pro].includes(searchValue);
              if(match) break;
            }
          }
          if (this.handleTreeData(treeData[i].children, searchValue).length > 0 || match ) {
            array.push({
              ...treeData[i],
              children: this.handleTreeData(treeData[i].children, searchValue),
            });
          }
        }
      return array;
    },
    // 将过滤好的树形数据展开
    setExpandRow(handleTreeData) {
      if(handleTreeData.length) {
        for (let i of handleTreeData) {
          this.expandRow.push(i.id)
          if(i.children.length) {
            this.setExpandRow(i.children)
          }
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#main {
  width: 1440px;
  // height: 918px;
  padding: 24px 50px;
  background: #f1f2f7;
  margin: 0 auto 150px auto;
  display: flex;
  justify-content: space-between;
  .menu {
    width: 210px;
    // height: 870px;
    background: #ffffff;
    border-radius: 2px;
    padding: 15px 8px 0 8px;
    overflow-y: overlay;
    .title {
      font-size: 20px;
      font-family: Helvetica-Bold, Helvetica;
      font-weight: bold;
      color: #17233d;
      line-height: 24px;
      margin-bottom: 24px;
    }
    .search {
      display: flex;
      width: 194px;
      height: 32px;
      background: #ffffff;
      margin-bottom: 28px;
      padding-left: 3px;
    }
  }
  .menu::-webkit-scrollbar {
    width: 4px;
    height: 10px;
  }
  .menu::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #6e5bfe;
  }
  .menu::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: #f3efff;
  }
  .container {
    width: 1114px;
    // height: 870px;
    background: #ffffff;
    border-radius: 2px 2px 0px 0px;
    padding: 15px 0 0 16px;
    .title {
      height: 32px;
      font-size: 20px;
      font-family: Helvetica-Bold, Helvetica;
      font-weight: bold;
      color: #17233d;
      line-height: 24px;
    }
    .content1 {
      margin: 16px 0;
    }
    .content2 {
      margin-bottom: 16px;
      /deep/img{
        max-width:100%;
      }
    }
    .content3 {
      margin-bottom: 30px;
    }
    .title2 {
      height: 32px;
      font-size: 30px;
      font-family: Helvetica-Bold, Helvetica;
      font-weight: bold;
      color: #17233d;
      line-height: 32px;
      margin-bottom: 28px;
    }
    img{
      max-height: 400px;
    }
  }
}
//element
::v-deep {
  .el-tree {
    font-size: 14px;
    font-family: Helvetica;
    color: #17233d;
    .el-tree-node__content{
      height: auto;
      margin:5px 0;
    }
    .el-tree-node__expand-icon {
      color: #808695;
    }
    .el-tree-node__content:hover {
      background-color: #f3efff;
    }
    .el-tree-node__expand-icon.is-leaf {
      color: transparent !important;
    }
    .el-tree-node:focus > .el-tree-node__content {
      background-color: #f3efff;
      color: #6e5bfe;
      font-weight: bold;
    }
  }
  .el-tree-node {
    font-size: 14px;
    font-family: Helvetica;
    color: #17233d;
    white-space:normal;
  }
  .el-tree-node__children {
    .el-tree-node {
      font-size: 14px;
      font-family: Helvetica;
      color: #515a6e;
    }
  }
  .el-input {
    width: 100%;
    height: 32px;
    .el-input-group__append {
      width: 42px;
      background: linear-gradient(270deg, #8853ff 0%, #5564fe 100%);
      padding: 0;
      border: none;
      text-align: center;
      .el-icon-search {
        color: #fff;
      }
    }
    .el-input__inner {
      height: 32px;
      border-radius: 1px;
      padding: 0 12px;
    }
  }
}
//响应式设计
@media screen and (max-width: 768px) {
  #main {
    width: 100vw;
    height: auto;
    flex-direction: column;
    padding: 0;
    margin: 0 auto 200px auto;
    .menu {
      width: 100%;
      height: auto;
      margin-bottom: 15px;
      text-align: center;
      .search {
        width: 80%;
        margin: 0 auto 28px;
      }
    }
    .container {
      width: 100%;
    }
  }
}
</style>
